<template>
  <form @submit="formSubmit" class='repair-form' report-submit>
    <div class="repairContainer">
            <div class='form-wrap'>
                <scroll-view style='height:100%;' :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" >
                    <div class='info-wrap' v-if='order'>
                        <div v-for='(point,index1) in order.points' :key='index1'>
                          <div v-if='point.objectId==objectId && point.pointType == pointType'>
                               <div class='info-line'>
                                  <div class='info-label blue'>{{point.pointName}}：</div>
                                  <div class='info-content' v-if='edit'>
                                      <i-switch :value="state" size="large" i-class='red'  @change="onChange($event,index1)" slot="footer">
                                          <view slot="open">正常</view>
                                          <view slot="close">异常</view>
                                      </i-switch>
                                  </div>
                                  <div class='info-content' v-else>{{point.result==1?'正常':'异常'}}</div>
                              </div>
                              <div class='info-line' v-for='(item,index) in point.items' :key='item.itemId' @click='selectOption(item,index1,index)'>
                                <div class='info-label blue' v-if='item.itemType==1'>{{item.itemName}}/{{item.itemContent}}[{{item.minValue}}~{{item.maxValue}}]：</div>
                                <div class='info-label blue' v-else>{{item.itemName}}：</div>
                                <div class='info-content' v-if='edit'>
                                    <i-switch :value="data[index]" size="large" v-if='item.itemType==2' @change="changeItem($event,index1,index)" slot="footer">
                                        <view slot="open">{{item.open}}</view>
                                        <view slot="close">{{item.close}}</view>
                                    </i-switch>
                                    <input class='form-input' type='number' :class="{invalid:!data[index]}" v-model='item.itemValue' v-if='item.itemType==1' @input="getBlur($event,item,index,index1)"/>
                                    <div class='blue' v-if='item.itemType==0'>{{options[index]}}<i-icon type="enter" size="20" color="#c9d7db" /></div>
                                </div>
                                <div class='info-content' v-else>
                                  {{item.itemValue}}
                                </div>
                            </div>
                          </div>
                        </div>
                        
                    </div>   
                </scroll-view>
            </div>
            <i-row i-class='submit-line'>
                <button formType="submit" class='submit-btn'>保存</button>
            </i-row>
            <i-modal :title='title' :visible="visible" :actions="actions" action-mode="vertical" @change="optionChange"></i-modal>
    </div>
    <i-toast id="toast" />
  </form>           
</template>

<script type="text/javascript">
import { mapState , mapActions} from 'vuex';
import moment from 'moment';
import { $Toast } from '@/../static/iview/base/index';
export default {
  data() {
    return {
        order:null,
        orderId:null,
        objectId:null,
        pointType:0,
        type:0,
        data:[],
        actions:[],
        title:"",
        visible:false,
        state:true,
        index1:0,
        index:0,
        options:[],
        valueList:[],
        edit:true
    }
  },
  onShow(){
    var params = this.$root.$mp.query;
    if(params.orderId) this.orderId = params.orderId;
    if(params.pointType) this.pointType = params.pointType;
    if(params.type) this.type = params.type;
    if(params.objectId) this.objectId = params.objectId;
    if(this.type!=0) this.queryOrderInfo();
  },
  computed:{
    ...mapState(['userInfo'])
  },
  methods:{
      ...mapActions([
          'setOrderDetail',
          'getOrderDetail'
      ]),
      onChange(event,index1){
        const value = event.mp.detail.value,val = value ? 1:2;
        this.state = value;
        this.$set(this.order.points[index1],'result',val);
        this.index1 = index1;
      },
      changeItem(event,index1,index){
          const value = event.mp.detail.value,
          item = this.order.points[index1].items[index],
          text = value ? item.open : item.close;
          this.data[index] = value
          this.state = this.data.indexOf(false)<0 ? true : false;
          let val = this.state ? 1:2;
          this.$set(item,'itemValue',text);
          this.$set(this.order.points[index1],'result',val);
          this.index1 = index1;
      },
      selectOption(item,index1,index){
          if(item.itemType==0){
            this.visible = true;
            this.actions = item.actions;
            this.title = item.itemName;
            this.index1 = index1;
            this.index = index;
          }
      },
      optionChange(event){
        this.visible = false;
        let index = event.mp.detail.index,text = this.actions[index].name;
        this.$set(this.order.points[this.index1].items[this.index],'itemValue',text);
        this.options[this.index] = text
      },
      getBlur(e,item,index,index1){
        let value = +e.mp.detail.value,min = +item.minValue,max = +item.maxValue;
        if(value<min || value>max){
          this.data[index] = false;
        }else{
          this.data[index] = true
        }
        this.valueList[index] = item.itemValue;
        this.state = this.data.indexOf(false)<0 ? true : false;
        let val = this.state ? 1:2;
        this.$set(this.order.points[index1],'result',val);
        this.index1 = index1;
      },
      queryOrderInfo(){
          this.getOrderDetail(this.orderId).then((res)=>{
              if(res){
                  this.order = res;
                  this.order.points.map(item=>{
                      if(item.objectId==this.objectId && item.pointType == this.pointType){
                          item.items.map((item,i)=>{
                              if(item.itemType==2){
                                  let arr = item.itemContent.split('/');
                                  item.open = arr[0];
                                  item.close = arr[1];
                              }
                              if(item.itemType==0){
                                item.actions = [];
                                let arr = item.itemContent.split('/');
                                arr.map(text=>{item.actions.push({name:text})});
                                item.itemValue = arr[0];
                                this.options[i] = arr[0];
                              }
                              if(item.itemType==1){
                                this.valueList[i] = '';
                              }
                              this.data[i] = true;
                          })
                      }
                  }) 
              }
          })
      },
      formSubmit(){
         let valid = this.valueList.indexOf('') < 0;
         if(valid){
           this.$set(this.order.points[this.index1],'dealTime',new Date().getTime());
           this.$set(this.order.points[this.index1],'dealTimeStr',moment(new Date()).format('HH:mm'));
           this.setOrderDetail(this.order)
           wx.navigateBack({delta:1})
         }else{
           $Toast({
                content: '选项值不能为空'
           });
         }
      }
  }
}
</script>

<style lang='less'>
page{
  height:100%;
  background:#eef7fd;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.repair-form{                 
  height: 100%
}
.repairContainer{
    height:100%;
    display: flex;
    flex-direction: column;
    .form-wrap{
      flex:1;
      height:50rpx;
      .info-wrap{
        display: flex;
        flex-direction: column;
        margin:20rpx;
        border:1px solid #ddd;
        border-radius:8rpx;
        background: #fff;
        .info-line{
            display: flex;
            justify-content:space-between;
            align-items: center;
            line-height:80rpx;
            padding:0 20rpx;
            border-bottom:1px solid #dfe3e5;
            &:last-child{
                border-bottom:none 
            }
            .info-label{
                font-size:30rpx;
                color: #8a8a8a;
                .blue{
                    color:#4d92c2
                }
            }
            .info-content{
                color:#4d92c2;
                .invalid{
                    color:#d42a33
                }
            }
            .form-input{
              color:#4d92c2;
              text-align: right;
            }
        }
        
      }
    }
    .submit-line{
      margin:50rpx 0; 
      .submit-btn{
        width:70%;
        background: #1380d3;
        color:#fff!important;
        font-size:36rpx;
        border-radius:40rpx; 
        height: 80rpx;
        line-height: 80rpx;
      }
    }
    .red{
        background-color:#ff554d;
    }
}   
</style>
